var levels = [
  {
    helpTitle: "根据元素类型选择",
    selectorName: "类型选择器",
    doThis: "选择盘子",
    selector: "plate",
    syntax: "A",
    help: "选择所有类型为 <strong>A</strong> 的元素。类型指的是标签的类型，例如 <tag>div</tag>、<tag>p</tag> 和 <tag>ul</tag> 是不同的元素类型。",
    examples: [
      "<strong>div</strong> 选择所有 <tag>div</tag> 元素。",
      "<strong>p</strong> 选择所有 <tag>p</tag> 元素。",
    ],
    boardMarkup: `
    <plate/>
    <plate/>
    `
  },
  {
    doThis: "选择便当盒",
    selector: "bento",
    syntax: "A",
    helpTitle: "根据元素类型选择",
    selectorName: "类型选择器",
    help: "选择所有类型为 <strong>A</strong> 的元素。类型指的是标签的类型，例如 <tag>div</tag>、<tag>p</tag> 和 <tag>ul</tag> 是不同的元素类型。",
    examples: [
      "<strong>div</strong> 选择所有 <tag>div</tag> 元素。",
      "<strong>p</strong> 选择所有 <tag>p</tag> 元素。",
    ],
    boardMarkup: `
    <bento/>
    <plate/>
    <bento/>
    `
  },
  {
    doThis: "选择带装饰的盘子",
    selector: "#fancy",
    selectorName: "ID选择器",
    helpTitle: "选择具有特定ID的元素",
    syntax: "#id",
    help: "选择具有特定 <strong>id</strong> 的元素。您还可以将ID选择器与类型选择器结合使用。",
    examples: [
      "<strong>#cool</strong> 选择任何 <strong>id=\"cool\"</strong> 的元素",
      "<strong>ul#long</strong> 选择 <tag>ul id=\"long\"</tag>",
    ],
    boardMarkup: `
    <plate id="fancy"/>
    <plate/>
    <bento/>
    `
  },
  {
    helpTitle: "选择嵌套在另一个元素中的元素",
    selectorName: "后代选择器",
    doThis: "选择盘子上的苹果",
    selector: "plate apple",
    syntax: "A&nbsp;&nbsp;B",
    help: "选择所有位于 <strong>A</strong> 内部的 <strong>B</strong>。<strong>B</strong> 被称为后代，因为它嵌套在另一个元素中。",
    examples: [
      "<strong>p&nbsp;strong</strong> 选择位于任何 <tag>p</tag> 内部的所有 <tag>strong</tag> 元素。",
      "<strong>#fancy&nbsp;span</strong> 选择位于具有 <strong>id=\"fancy\"</strong> 的元素内部的任何 <tag>span</tag> 元素。",
    ],
    boardMarkup: `
    <bento/>
    <plate>
      <apple/>
    </plate>
    <apple/>
    `
  },
  {
    doThis: "选择带装饰的盘子上的腌黄瓜",
    selector: "#fancy pickle",
    helpTitle: "结合后代选择器与ID选择器",
    syntax: "#id&nbsp;&nbsp;A",
    help: "您可以将任何选择器与后代选择器结合使用。",
    examples: [
      "<strong>#cool&nbsp;span</strong> 选择所有位于 <strong>id=\"cool\"</strong> 的元素内部的 <tag>span</tag> 元素。",
    ],
    boardMarkup: `
    <bento>
    <orange/>
    </bento>
    <plate id="fancy">
      <pickle/>
    </plate>
    <plate>
      <pickle/>
    </plate>
    `
  },
  {
    doThis: "选择小苹果",
    selector: ".small",
    selectorName: "类选择器",
    helpTitle: "根据类选择元素",
    syntax: ".classname",
    help: "类选择器选择所有具有该类属性的元素。一个元素只能有一个ID，但可以有多个类。",
    examples: [
      "<strong>.neato</strong> 选择所有具有 <strong>class=\"neato\"</strong> 的元素。",
    ],
    boardMarkup: `
    <apple/>
    <apple class="small"/>
    <plate>
      <apple class="small"/>
    </plate>
    <plate/>
    `
  },
  {
    doThis: "选择小橙子",
    selector: "orange.small",
    helpTitle: "结合类选择器",
    syntax: "A.className",
    help: "您可以将类选择器与其他选择器（例如类型选择器）结合使用。",
    examples: [
      "<strong>ul.important</strong> 选择所有具有 <strong>class=\"important\"</strong> 的 <tag>ul</tag> 元素。",
      "<strong>#big.wide</strong> 选择具有 <strong>id=\"big\"</strong> 且同时具有 <strong>class=\"wide\"</strong> 的所有元素。",
    ],
    boardMarkup: `
    <apple/>
    <apple class="small"/>
    <bento>
      <orange class="small"/>
    </bento>
    <plate>
      <orange/>
    </plate>
    <plate>
      <orange class="small"/>
    </plate>`
  },
  {
    doThis: "选择便当盒中的小橙子",
    selector: "bento orange.small",
    syntax: "加油！",
    helpTitle: "你可以做到……",
    help: "结合你在前几关学到的内容来解决这一关！",
    boardMarkup: `
    <bento>
      <orange/>
    </bento>
    <orange class="small"/>
    <bento>
      <orange class="small"/>
    </bento>
    <bento>
      <apple class="small"/>
    </bento>
    <bento>
      <orange class="small"/>
    </bento>
    `
  },
  {
    doThis: "选择所有盘子和便当盒",
    selector: "plate,bento",
    selectorName: "逗号组合器",
    helpTitle: "用逗号组合选择器",
    syntax: "A, B",
    help: "通过这种组合方式，您可以选择所有 <strong>A</strong> 和 <strong>B</strong> 元素。您可以以这种方式组合任意选择器，并且可以指定多个选择器。",
    examples: [
      "<strong>p, .fun</strong> 选择所有 <tag>p</tag> 元素以及所有具有 <strong>class=\"fun\"</strong> 的元素。",
      "<strong>a, p, div</strong> 选择所有 <tag>a</tag>、<tag>p</tag> 和 <tag>div</tag> 元素。",
    ],
    boardMarkup: `
    <pickle class="small"/>
    <pickle/>
    <plate>
      <pickle/>
    </plate>
    <bento>
      <pickle/>
    </bento>
    <plate>
      <pickle/>
    </plate>
    <pickle/>
    <pickle class="small"/>
    `
  },
  {
    doThis: "选择所有元素！",
    selector: "*",
    selectorName: "通用选择器",
    helpTitle: "选择所有元素！",
    syntax: "*",
    help: "使用通用选择器，您可以选择所有元素！",
    examples: [
      "<strong>p *</strong> 选择所有位于 <tag>p</tag> 内部的元素。",
    ],
    boardMarkup: `
    <apple/>
    <plate>
      <orange class="small" />
    </plate>
    <bento/>
    <bento>
      <orange/>
    </bento>
    <plate id="fancy"/>
    `
  },

  {
    doThis: "选择盘子上的所有元素",
    selector: "plate *",
    syntax: "A&nbsp;&nbsp;*",
    helpTitle: "结合通用选择器",
    help: "选择位于 <strong>A</strong> 内部的所有元素。",
    examples: [
      "<strong>p *</strong> 选择位于所有 <tag>p</tag> 内部的元素。",
      "<strong>ul.fancy *</strong> 选择位于所有 <tag>ul class=\"fancy\"</tag> 内部的元素。"
    ],
    boardMarkup: `
    <plate id="fancy">
      <orange class="small"/>
    </plate>
    <plate>
      <pickle/>
    </plate>
    <apple class="small"/>
    <plate>
      <apple/>
    </plate>`
  },
  {
    doThis: "选择紧挨着盘子的每个苹果",
    selector: "plate + apple",
    helpTitle: "选择直接跟随某个元素的元素",
    selectorName: "兄弟选择器",
    syntax: "A + B",
    help: "选择所有直接跟随在 <strong>A</strong> 后的 <strong>B</strong> 元素。连续的元素称为兄弟，它们位于同一级别或深度。<br/><br/>在本关的 HTML 标记中，缩进相同的元素是兄弟关系。",
    examples: [
      "<strong>p + .intro</strong> 选择直接跟随 <tag>p</tag> 的每个 <strong>class=\"intro\"</strong> 元素。",
      "<strong>div + a</strong> 选择直接跟随 <tag>div</tag> 的每个 <tag>a</tag> 元素。"
    ],
    boardMarkup: `
    <bento>
      <apple class="small"/>
    </bento>
    <plate />
    <apple class="small"/>
    <plate />
    <apple/>
    <apple class="small"/>
    <apple class="small"/>
    `
  },
  {
    selectorName: "通用兄弟选择器",
    helpTitle: "选择跟随某个元素的所有元素",
    syntax: "A ~ B",
    doThis: "选择便当盒旁边的泡菜",
    selector: "bento ~ pickle",
    help: "选择某个元素之后的所有兄弟元素。这类似于相邻选择器 (A + B)，但它会获取所有后续元素，而不仅仅是一个。",
    examples: [
      "<strong>A ~ B</strong> 选择所有跟随 <strong>A</strong> 的 <strong>B</strong> 元素。"
    ],
    boardMarkup: `
    <pickle/>
    <bento>
      <orange class="small"/>
    </bento>
    <pickle class="small"/>
    <pickle/>
    <plate>
      <pickle/>
    </plate>
    <plate>
      <pickle class="small"/>
    </plate>
    `
  },
  {
    selectorName: "子元素选择器",
    syntax: "A > B&nbsp;",
    doThis: "选择直接放在盘子上的苹果",
    selector: "plate > apple",
    helpTitle: "选择某个元素的直接子元素",
    help: "选择作为其他元素直接子元素的元素。直接子元素是直接嵌套在另一个元素中的元素。<br/><br/>更深层嵌套的元素称为后代元素。",
    examples: [
      "<strong>A > B</strong> 选择所有作为 <strong>A</strong> 的直接子元素的 <strong>B</strong> 元素。"
    ],
    boardMarkup: `
    <plate>
      <bento>
        <apple/>
      </bento>
    </plate>
    <plate>
      <apple/>
    </plate>
    <plate/>
    <apple/>
    <apple class="small"/>
    `
  },
  {
    selectorName: ":first-child选择器",
    helpTitle: "选择某个元素内部的第一个子元素",
    doThis: "选择堆在顶部的橙子",
    selector: "plate :first-child",
    syntax: ":first-child",
    help: "选择第一个子元素。子元素是直接嵌套在另一个元素中的元素。您可以将此伪类选择器与其他选择器结合使用。",
    examples: [
      "<strong>:first-child</strong> 选择所有第一个子元素。",
      "<strong>p:first-child</strong> 选择所有第一个子 <tag>p</tag> 元素。",
      "<strong>div p:first-child</strong> 选择位于 <tag>div</tag> 中的所有第一个子 <tag>p</tag> 元素。"
    ],
    boardMarkup: `
    <bento/>
    <plate />
    <plate>
      <orange />
      <orange />
      <orange />
    </plate>
    <pickle class="small" />
    `
  },
  {
    selectorName: ":only-child选择器",
    helpTitle: "选择作为唯一子元素的元素",
    doThis: "选择盘子上的苹果和腌黄瓜",
    selector: "plate :only-child",
    syntax: ":only-child",
    help: "选择作为某个元素唯一子元素的元素。",
    examples: [
      "<strong>span:only-child</strong> 选择作为其他元素唯一子元素的 <tag>span</tag> 元素。",
      "<strong>ul li:only-child</strong> 选择 <tag>ul</tag> 中唯一的 <tag>li</tag> 元素。"
    ],
    boardMarkup: `
    <plate>
      <apple/>
    </plate>
    <plate>
      <pickle />
    </plate>
    <bento>
      <pickle />
    </bento>
    <plate>
      <orange class="small"/>
      <orange/>
    </plate>
    <pickle class="small"/>
    `
  },

  {
    selectorName: ":nth-last-child选择器",
    helpTitle: "根据元素在父元素中的倒数顺序选择",
    doThis: "选择右起第2个便当盒",
    selector: "bento:nth-last-child(3)",
    syntax: ":nth-last-child(A)",
    help: "从父元素底部开始选择子元素。这与 nth-child 类似，但从后往前计数！",
    examples: [
      '<strong>:nth-last-child(2)</strong> 选择所有倒数第二个子元素。'
    ],
    boardMarkup: `
    <plate/>
    <bento/>
    <plate>
      <orange/>
      <orange/>
      <orange/>
    </plate>
    <bento/>
    `
  },
  {
    selectorName: ":first-of-type选择器",
    helpTitle: "选择特定类型的第一个元素",
    doThis: "选择第一个苹果",
    selector: "apple:first-of-type",
    syntax: ":first-of-type",
    help: "选择某个元素中该类型的第一个元素。",
    examples: [
      '<strong>span:first-of-type</strong> 选择每个元素中的第一个 <tag>span</tag> 元素。'
    ],
    boardMarkup: `
    <orange class="small"/>
    <apple/>
    <apple class="small"/>
    <apple/>
    <apple class="small"/>
    <plate>
      <orange class="small"/>
      <orange/>
    </plate>
    `
  },
  {
    selectorName: ":nth-of-type选择器",
    doThis: "选择所有偶数位置盘子",
    selector: "plate:nth-of-type(even)",
    syntax: ":nth-of-type(A)",
    help: "根据某个元素的类型和顺序选择特定元素，例如偶数或奇数的实例。",
    examples: [
      '<strong>div:nth-of-type(2)</strong> 选择第二个 div 实例。',
      '<strong>.example:nth-of-type(odd)</strong> 选择所有奇数的 example 类实例。'
    ],
    boardMarkup: `
    <plate/>
    <plate/>
    <plate/>
    <plate/>
    <plate id="fancy"/>
    <plate/>
    `
  },
  {
    selectorName: ":nth-of-type选择器（带公式）",
    doThis: "从第3个开始，选择间隔为1的每个盘子",
    selector: "plate:nth-of-type(2n+3)",
    syntax: ":nth-of-type(An+B)",
    help: "nth-of-type 公式选择每第 n 个元素，从指定实例开始计数。",
    examples: [
      '<strong>span:nth-of-type(6n+2)</strong> 从第2个开始，每隔6个选择一次 <tag>span</tag> 实例。'
    ],
    boardMarkup: `
    <plate/>
    <plate>
      <pickle class="small" />
    </plate>
    <plate>
      <apple class="small" />
    </plate>
    <plate/>
    <plate>
      <apple />
    </plate>
    <plate/>
    `
  },
  {
    selectorName: ":only-of-type选择器",
    helpTitle: "选择父元素中唯一的该类型元素",
    selector: "apple:only-of-type",
    syntax: ":only-of-type",
    doThis: "选择中间盘子上的苹果",
    help: "选择某个元素中唯一的该类型元素。",
    examples: [
      '<strong>p span:only-of-type</strong> 在任意 <tag>p</tag> 中选择唯一的 <tag>span</tag> 元素。'
    ],
    boardMarkup: `
    <plate id="fancy">
      <apple class="small" />
      <apple />
    </plate>
    <plate>
      <apple class="small" />
    </plate>
    <plate>
      <pickle />
    </plate>
    `
  },

  {
    selectorName: ":last-of-type选择器",
    helpTitle: "选择特定类型的最后一个元素",
    doThis: "选择最后一个苹果和橙子",
    selector: ".small:last-of-type",
    syntax: ":last-of-type",
    help: "选择每个元素中该类型的最后一个元素。记住，类型是指标签种类，例如 <tag>p</tag> 和 <tag>span</tag> 是不同的类型。<br><br>我想这可能是选择最后一只恐龙的方式。",
    examples: [
      '<strong>div:last-of-type</strong> 选择每个元素中最后一个 <tag>div</tag>。',
      '<strong>p span:last-of-type</strong> 选择每个 <tag>p</tag> 中最后一个 <tag>span</tag> 元素。'
    ],
    boardMarkup: `
  <orange class="small"/>
  <orange class="small" />
  <pickle />
  <pickle />
  <apple class="small" />
  <apple class="small" />
  `
  },
  {
    selectorName: ":empty选择器",
    helpTitle: "选择没有子元素的元素",
    doThis: "选择空的便当盒",
    selector: "bento:empty",
    syntax: ":empty",
    help: "选择那些内部没有任何子元素的元素。",
    examples: [
      '<strong>div:empty</strong> 选择所有空的 <tag>div</tag> 元素。'
    ],
    boardMarkup: `
  <bento/>
  <bento>
    <pickle class="small"/>
  </bento>
  <plate/>
  <bento/>`
  },
  {
    selectorName: ":not选择器",
    helpTitle: "选择所有不匹配否定选择器的元素",
    doThis: "选择大的苹果",
    selector: "apple:not(.small)",
    syntax: ":not(X)",
    help: "您可以使用它选择所有不匹配选择器 <strong>\"X\"</strong> 的元素。",
    examples: [
      '<strong>:not(#fancy)</strong> 选择所有没有 <strong>id="fancy"</strong> 的元素。',
      '<strong>div:not(:first-child)</strong> 选择所有不是第一个子元素的 <tag>div</tag>。',
      '<strong>:not(.big, .medium)</strong> 选择所有没有 <strong>class="big"</strong> 或 <strong>class="medium"</strong> 的元素。'
    ],
    boardMarkup: `
  <plate id="fancy">
    <apple class="small" />
  </plate>
  <plate>
    <apple />
  </plate>
  <apple />
  <plate>
    <orange class="small" />
  </plate>
  <pickle class="small" />
  `
  },
  {
    selectorName: "属性选择器",
    helpTitle: "选择所有具有特定属性的元素",
    doThis: "选择为某人准备的物品",
    selector: "[for]",
    syntax: "[attribute]",
    help: "属性出现在元素的起始标签中，例如：<tag>span attribute=\"value\"</tag>。属性可以没有值，它可以是空的！",
    examples: [
      '<strong>a[href]</strong> 选择所有具有 <strong>href="anything"</strong> 属性的 <tag>a</tag> 元素。',
      '<strong>[type]</strong> 选择所有具有 <strong>type="anything"</strong> 属性的元素。'
    ],
    boardMarkup: `
  <bento><apple class="small"/></bento>
  <apple for="Ethan"/>
  <plate for="Alice"><pickle/></plate>
  <bento for="Clara"><orange/></bento>
  <pickle/>`
  },
  {
    selectorName: "属性选择器",
    helpTitle: "选择所有具有特定属性的元素",
    doThis: "选择为某人准备的盘子",
    selector: "plate[for]",
    syntax: "A[attribute]",
    help: "通过在末尾添加，结合属性选择器与其他选择器（例如标签名选择器）。",
    examples: [
      '<strong>[value]</strong> 选择所有具有 <strong>value="anything"</strong> 属性的元素。',
      '<strong>a[href]</strong> 选择所有具有 <strong>href="anything"</strong> 属性的 <tag>a</tag> 元素。',
      '<strong>input[disabled]</strong> 选择所有带有 <strong>disabled</strong> 属性的 <tag>input</tag> 元素。'
    ],
    boardMarkup: `
  <plate for="Sarah"><pickle/></plate>
  <plate for="Luke"><apple/></plate>
  <plate/>
  <bento for="Steve"><orange/></bento>
  `
  },
  {
    selectorName: "属性值选择器",
    helpTitle: "选择具有特定属性值的所有元素",
    doThis: "选择 Vitaly 的餐点",
    selector: "[for=Vitaly]",
    syntax: '[attribute="value"]',
    help: "属性选择器区分大小写，每个字符必须完全匹配。",
    examples: [
      '<strong>input[type="checkbox"]</strong> 选择所有复选框输入元素。'
    ],
    boardMarkup: `
  <apple for="Alexei" />
  <bento for="Albina"><apple /></bento>
  <bento for="Vitaly"><orange/></bento>
  <pickle/>`
  },
  {
    selectorName: "属性以指定字符开头选择器",
    helpTitle: "选择属性值以特定字符开头的所有元素",
    doThis: "选择名字以 'Sa' 开头的物品",
    selector: '[for^="Sa"]',
    syntax: '[attribute^="value"]',
    examples: [
      '<strong>.toy[category^="Swim"]</strong> 选择带有类 <strong>toy</strong> 且属性 <strong>category="Swimwear"</strong> 或 <strong>category="Swimming"</strong> 的元素。'
    ],
    boardMarkup: `
  <plate for="Sam"><pickle/></plate>
  <bento for="Sarah"><apple class="small"/></bento>
  <bento for="Mary"><orange/></bento>
  `
  },
  {
    selectorName: "属性以指定字符结尾选择器",
    helpTitle: "选择属性值以特定字符结尾的所有元素",
    doThis: "选择名字以 'ato' 结尾的物品",
    selector: '[for$="ato"]',
    syntax: '[attribute$="value"]',
    help: "",
    examples: [
      '<strong>img[src$=".jpg"]</strong> 选择所有显示 .jpg 图片的图片。'
    ],
    boardMarkup: `
  <apple class="small"/>
  <bento for="Hayato"><pickle/></bento>
  <apple for="Ryota"></apple>
  <plate for="Minato"><orange/></plate>
  <pickle class="small"/>`
  },
  {
    selectorName: "属性通配符选择器",
    helpTitle: "选择属性值中包含特定字符的所有元素",
    syntax: '[attribute*="value"]',
    doThis: "选择名字中包含 'obb' 的餐点",
    selector: '[for*="obb"]',
    help: "如果您可以识别属性中的模式（例如 <strong>class</strong>、<strong>href</strong> 或 <strong>src</strong>），这个选择器非常有用。",
    examples: [
      '<strong>img[src*="/thumbnails/"]</strong> 选择所有图片元素，这些图片来自 \"thumbnails\" 文件夹。',
      '<strong>[class*="heading"]</strong> 选择类中包含 \"heading\" 的所有元素，例如 <strong>class="main-heading"</strong> 和 <strong>class="sub-heading"</strong>。'
    ],
    boardMarkup: `
  <bento for="Robbie"><apple /></bento>
  <bento for="Timmy"><pickle /></bento>
  <bento for="Bobby"><orange /></bento>
  `
  }

];
